<template>
    <router-link :to="{
            name:'commodity',
            query:{
                ImageUrl:require('@/assets/images/'+item.logo),
                obj:JSON.stringify(item),
                navMsg:JSON.stringify(navMsg)
            }
        }"
        class="router-link" @click="isShow = true">
        <div class="frame" @click="plus">
            <div class="mark" v-show="isShow">{{ mark }}</div>
            <div class="mkMsg">               
                <div class="mkImg">
                    <img :src="url" alt="" class="trademark">
                    <!-- <img src="@/assets/images/market.jpg" alt="" class="trademark"> -->
                </div>
                <div class="msg">
                    <div class="name">{{ item.name }}</div>
                    <div class="passMsg">起送￥{{ item.start_price }}</div>
                    <div class="sale_volume">月售{{ item.month_sales }}</div>
                    <div class="welfare">红包{{ item.welfare }}</div>
                    <a>
                        <div class="redPaper">
                            红包部分
                        </div>
                    </a>
                </div>
            </div>       
        </div>
    </router-link>
</template>

<script>
import { computed, inject, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name:'Market',
    props:['item'],
    setup(props,{emit}){
        let item = props.item
        let url = require('@/assets/images/'+item.logo)
        let num = ref(0)
        let mark = '刚刚浏览过'
        let isShow = ref(false)
        let navMsg = inject('navItem')
        return { num,mark,isShow,url,item,navMsg }
    }
}
</script>

<style scoped>
    .router-link {
        all: unset;
    }
    .frame {
        background-color: white;
        border-radius: 5px;
        position: relative;
        min-width: 250px;
    }
    .num {
        width: 20px;
        text-align: center;
        /* float: left; */
        position: absolute;
        background-color: rgb(255, 67, 67);
        border-radius: 50%;
        border: 1px solid rgb(255, 255, 255);
        color: white;
    }
    .mark {
        width: 50px;
        padding: 4px;
        font-size: 10px;
        text-align: center;
        position: absolute;
        background-color: rgb(214, 208, 208);
        border-radius: 5px;
        border: 1px solid rgb(255, 255, 255);
        color: white;
    }
    .mkMsg {
        display: flex;
        justify-content: space-around;
    }
    .mkImg {
        margin-right: 10px;
        padding: 2px;
        overflow: hidden;
    }
    .mkImg {

        width: 50%;
        overflow: hidden;
    }
    .mkImg {
        width: 60%;
        /* height: 100%; */
    }
    .msg {
        margin-top: 5px;
    }
    .trademark {
        height: 140px;
    }
</style>